<template>
  <div class="safeMain">
    <PageHeader :lang="lang"></PageHeader>
    <!--安全策略-->
    <div class="pageBody" id="pageBody">
      <!-- 左侧部分 -->
      <componentsPageMenu :lang="lang"></componentsPageMenu>
      <!-- 右侧部分 -->
      <div class="pageMain">
        <section class="safetystrategy">
          <div class="item clearfix" >
            <div class="title"><p>{{lang['loginAuthentication']}}<em>{{lang['login IDCM']}}</em></p></div>
            <p class="content">
              <em v-show="num2 === 100">{{lang['loginPassword']}}</em>
              <em v-show="num2 === 101">{{lang['password remote login']}}</em>
              <em v-show="num2 === 102">{{lang['password Google validation']}} </em>
              <em v-show="num2 === 103">{{lang['password login Google']}}</em>
            </p>
            <a class="operation operation1" :class="{active: itemshowA}" v-on:click="itemshowA = !itemshowA">
              {{lang['basic_revise']}}
              <img src="./images/downArrow.png">
            </a>
          </div>

          <section class="safetystrategy_Open" v-show="itemshowA">
            <ul>
              <li :class="{active: num2 === 100}">
                <span>{{lang['loginPassword']}}</span>
                <a class="select" @click="showLogoibtn(100)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num2 === 101 }">
                <span>{{lang['password remote login']}}</span>
                <a class="select" @click="showLogoibtn(101)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num2 === 102}">
                <span>{{lang['password Google validation']}} <em v-show="!showIsGoogleTFA">{{lang['Google is not turned']}}</em></span>
                <a class="select"  v-show="showIsGoogleTFA" @click="showLogoibtn(102)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num2 === 103}">
                <span>{{lang['password login Google']}}<em v-show="!showIsGoogleTFA">{{lang['Google is not turned']}}</em></span>
                <a class="select"  v-show="showIsGoogleTFA" @click="showLogoibtn(103)">{{lang['select this item']}}</a>
              </li>
            </ul>
          </section>

          <div class="item clearfix " >
            <div class="title"><p>{{lang['transaction Verification']}}<em>{{lang['virtual currency spot verification']}}</em></p></div>
            <p class="content">
              <em v-show="num3 === 200">{{lang['never enter password']}}</em>
              <em v-show="num3 === 201">{{lang['password within sixe hours title']}}</em>
              <em v-show="num3 === 202">{{lang['verifies fund code']}}</em>
            </p>
            <a class="operation operation1" :class="{active: itemshowB}" v-on:click="itemshowB = !itemshowB">
              {{lang['basic_revise']}}
              <img src="./images/downArrow.png">
            </a>
          </div>

          <section class="safetystrategy_Open"  v-show="itemshowB">
            <ul>
              <li :class="{active: num3 === 200}">
                <span>{{lang['never enter password']}}</span>
                <a class="select" @click="showTransaibtn(200)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num3 === 201}">
                <span>{{lang['password within sixe hours']}}</span>
                <a class="select" @click="showTransaibtn(201)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num3 === 202}">
                <span>{{lang['verifies fund code']}}</span>
                <a class="select" @click="showTransaibtn(202)">{{lang['select this item']}}</a>
              </li>
            </ul>
          </section>

          <div class="item clearfix">
            <div class="title"><p>{{lang['withdrawal verification']}}<em>{{lang['carrying various operations']}}</em></p></div>
             <p class="content">
              <em v-show="num4 === 300">{{lang['basic_capitalPassword']}}</em>
              <em v-show="num4 === 301">{{lang['Fund password Google code']}}</em>
            </p>
            <a class="operation operation1" :class="{active: itemshowC}" v-on:click="itemshowC = !itemshowC">{{lang['basic_revise']}}
              <img src="./images/downArrow.png"></a>
          </div>

          <section class="safetystrategy_Open"  v-show="itemshowC">
            <ul>
              <li :class="{active: num4 === 300}">
                <span>{{lang['basic_capitalPassword']}}</span>
                <a class="select" @click="showWithdrawibtn(300)">{{lang['select this item']}}</a>
              </li>

              <li :class="{active: num4 === 301}">
                <span>{{lang['Fund password Google code']}}<em v-show="!showIsGoogleTFA">{{lang['Google is not turned']}}</em></span>
                <a class="select"  v-show="showIsGoogleTFA"  @click="showWithdrawibtn(301)">{{lang['select this item']}}</a>
              </li>
            </ul>
          </section>
        </section>
      </div>
    </div>

    <!-- 登录验证 策略-->
    <SwModal :isShow.sync="showLoginModal" modalClass="userModal" :isCloseOnClickBg="true" :isShowCloseBtn= "true" :title="lang['loginAuthentication']"  :isShowBg="true"  :okText="lang.determineBth" :ok="login_okTexBtn">
      <section class="safe_verification">
        <ul>
          <li>
            <label>{{lang['basic_capitalPassword']}}</label>
            <p>
              <input type="password" name="" v-model="logoSafePwd">
            </p>
          </li>
          <li v-show="showIsGoogleTFA">
            <label>{{lang['Google verification code']}}</label>
            <p>
              <input type="password" name="" v-model="logoGooglePin">
            </p>
          </li>
        </ul>
      </section>
    </SwModal>

    <!-- 交易验证 策略-->
    <SwModal :isShow.sync="showTransaModal" modalClass="userModal" :isCloseOnClickBg="true" :isShowCloseBtn= "true" :title="lang['transaction Verification']" :isShowBg="true" :okText="lang.determineBth" :ok="Transa_okTexBtn" >
      <section class="safe_verification" >
        <ul>
          <li>
            <label>{{lang['basic_capitalPassword']}}</label>
            <p>
              <input type="password" name="" maxlength="6" v-model="TransaSafePwd">
            </p>
          </li>
        </ul>
      </section>
    </SwModal>

    <!-- 提现验证 策略-->
    <SwModal :isShow.sync="showWithdrawModal" modalClass="userModal" :isCloseOnClickBg="true" :isShowCloseBtn= "true" :isShowBg="true" :title="lang['withdrawal verification']" :okText="lang.determineBth"
    :ok="Withdraw_okTexBtn" >
      <section class="safe_verification" >
        <ul>
          <li>
            <label>{{lang['basic_capitalPassword']}}</label>
            <p>
              <input type="password" name="" v-model="WithdrawfePwd">
            </p>
          </li>
          <li v-show="showIsGoogleTFA">
            <label>{{lang['Google verification code']}}</label>
            <p>
              <input type="password" name="" v-model="WithdrawGooglePin">
            </p>
          </li>
        </ul>
      </section>
    </SwModal>

    <!-- 弹窗 提示 2-->
    <SwModal :isShow.sync="showModal" modalClass="userModal" :isShowBg="true" :title="lang['prompt message']" :okText="lang['determineBth']" :ok="safety_determine"
    :isCloseOnClickBg="true" :onClosed="onClosed" >
      <div class="successfulOperation">
        <p>{{lang['successfully changed']}}</p>
      </div>
    </SwModal>
    <!-- 弹窗 提示-->

    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import componentsPageMenu from './components/pageMenu.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      showLoginModal: false,
      showTransaModal: false,
      showWithdrawModal: false,
      showModal: false,
      itemshowA: false,
      itemshowB: false,
      itemshowC: false,
      showIsGoogleTFA: '',
      logoSafePwd: '',
      logoGooglePin: '',
      TransaSafePwd: '',
      WithdrawfePwd: '',
      WithdrawGooglePin: '',
      num: 0,
      num2: 0,
      num3: 0,
      num4: 0
    }
  },
  components: {
    SwModal,
    componentsPageMenu
  },
  methods: {
    showLogoibtn (e) {
      this.num = e
      this.logoSafePwd = ''
      this.logoGooglePin = ''
      this.showLoginModal = !this.showLoginModal
    },

    showTransaibtn (e) {
      this.num = e
      this.TransaSafePwd = ''
      this.showTransaModal = !this.showTransaModal
    },

    showWithdrawibtn (e) {
      this.num = e
      this.WithdrawfePwd = ''
      this.WithdrawGooglePin = ''
      this.showWithdrawModal = !this.showWithdrawModal
    },
    // 登录策略
    login_okTexBtn () {
      if (!this.logoSafePwd) {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], '', '', 'userModal') // '请输入PIN
        return
      }
      if (this.showIsGoogleTFA) {
        if (!this.logoGooglePin) {
          ModalApi.message(this.lang['PleaseGoogleCode'], '', '', 'userModal') // '请输入谷歌验证码'
          return
        }
      }
      this.$http.post('Security/SetLoginSecurityStrategy', {
        safePwd: this.logoSafePwd,
        googlePin: this.logoGooglePin,
        securityVerifyType: this.num
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.num2 = this.num
          this.showLoginModal = !this.showLoginModal
          this.showModal = !this.showModal
        }
      })
    },
    // 交易验证策略
    Transa_okTexBtn () {
      if (!this.TransaSafePwd) {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], '', '', 'userModal') // '请输入资金密码'
        return
      }
      this.$http.post('Security/SetTranSecurityStrategy', {
        safePwd: this.TransaSafePwd,
        securityVerifyType: this.num
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.num3 = this.num
          this.showTransaModal = !this.showTransaModal
          this.showModal = !this.showModal
        }
      })
    },
    // 提现验证策略
    Withdraw_okTexBtn () {
      if (!this.WithdrawfePwd) {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], '', '', 'userModal') // '请输入pin
        return
      }
      if (this.showIsGoogleTFA) {
        if (!this.WithdrawGooglePin) {
          ModalApi.message(this.lang['PleaseGoogleCode'], '', '', 'userModal') // '请输入谷歌验证码'
          return
        }
      }
      this.$http.post('Security/SetCashOutSecurityStrategy', {
        safePwd: this.WithdrawfePwd,
        googlePin: this.WithdrawGooglePin,
        securityVerifyType: this.num
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.num4 = this.num
          this.showWithdrawModal = !this.showWithdrawModal
          this.showModal = !this.showModal
        }
      })
    },
    safety_determine () {
      this.showModal = !this.showModal
    },
    onClosed () {

    }
  },
  mounted () {
    /*
    获取首页信息
    */
    this.$http.post('Security/GetCustomer', {

    }, {
      isDisposeCode: false, // 屏蔽2个弹窗
      modalOptions: {
        modalClass: 'userModal'
      }
    }).then((res) => {
      this.GetCustomerData = res
      if (this.GetCustomerData.IsGoogleTFA) {
        this.showIsGoogleTFA = this.GetCustomerData.IsGoogleTFA
      } else {
        this.showIsGoogleTFA = this.GetCustomerData.IsGoogleTFA
      }
    })
    /*
    获取首页信息结束
    */
 /*
    获取安全策略信息开始
    */
    this.$http.post('Security/GetSecurityStrategy', {

    }, {
      modalOptions: {
        modalClass: 'userModal'
      }
    })
    .then((res) => {
      this.num2 = res.LoginVerifyType
      this.num3 = res.TranVerifyType
      this.num4 = res.CashOutVerifyType
    })
  }
}
</script>

<style lang="less">
.safeMain{
  background: #14141c;
}

.safetystrategy {
  margin-top:30px;

  .item {
    padding:0 20px;
    margin-top: 10px;
    width: 100%;
    height:48px;
    line-height: 48px;
    box-sizing: border-box;
    overflow: hidden;
    background: #202832;

    .title {
      float: left;
      width: 360px;
      color: #fff;
      p em{
        padding-left: 80px;
        color: #ccc;
        font-size: 12px;
      }
    }
    .content {
      float: left;
      margin-left:30px;
      color: #ccc;

      span{
        color: #fff;
      }
    }
    .operation {
      float: right;
      color: #2E7FD0;
      img{
        vertical-align: middle;
        padding: 0 5px;
      }
      &.active img{
        transform: rotate(180deg);
        padding: 0 5px;
      }
    }
  }
}

.safetystrategy_Open {
  background: #181A23;

  ul {
    padding: 0 20px;
    li {
      line-height: 48px;
      border-bottom: solid 1px #23252F;

      &:last-child{
        border-bottom: none;
      }

      .select{
        float: right;
        display: inline-block;
        margin-top: 10px;
        padding: 0 5px;
        min-width: 84px;
        height: 28px;
        line-height: 28px;
        border-radius: 2px;
        text-align: center;
        background: #3782FF;
        color: #fff;
      }

      span{
        color: #fff;

        em{
          color: #ccc;
          padding-left: 10px;
          font-size: 12px;
        }
      }

      &.active span {
        color: #2E7FD0;
      }
      &.active .select {
        display: none;
      }
    }
  }
}

/*安全验证*/
.safe_verification{
  width:480px;
  padding:0 46px 30px;

  li{
    position: relative;

    label {
      padding-bottom: 5px;
      padding-top: 15px;
      display: block;
      color: #fff;
    }
    p {
      position: relative;

      input {
        box-sizing: border-box;
        line-height: 36px;
        height: 36px;
        width: 100%;
        background: #2A3440;
        border-radius: 2px;
        padding-left: 10px;
        font-size: 16px;
        color: #fff;
      }
    }
  }
}
@media screen and (max-width:1200px){
  .safetystrategy .item { padding: 0 10px;}
  .safetystrategy .item .title {
    width: 220px;
  }
  .safetystrategy .item .title p em {
    padding-left: 30px;
  }
  .safetystrategy .item .content {
    max-width: 200px;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .safetystrategy_Open ul li span em {
    padding-left: 0;
  }

}
</style>
